<template>
	<view class="mine">
		<image class="headerImg" src="../../static/images/mineBg.png" mode=""></image>
		<view class="warpper">
			<view class="team">
				<image class="avatar" :src="userInfo.avatar?userInfo.avatar:'../../static/images/moren.png'" mode="">
				</image>
				<view class="team-tp">
					<view class="nikename">{{userInfo.nickname}}</view>
					<view class="phone">{{userInfo.phone}}</view>
				</view>
				<view class="team-tb" @click="toEarnPage">
					<view class="line">
						<view class="line-fl">我的收益</view>
						<view class="line-fr">
							<text class="txt">查看详情</text>
							<image class="arrow" src="../../static/images/arrow.png" mode=""></image>
						</view>
					</view>
					<view class="line2">
						<view class="line2-item">
							<view class="num">
								{{userInfo.total_income}}
							</view>
							<view class="label">
								累计收益
							</view>
						</view>
						<view class="line2-item">
							<view class="num">
								{{userInfo.now_money}}
							</view>
							<view class="label">
								当前余额
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="setting">
				<view class="setting-item" v-for="(item, index) in settingList" :key="index" @click="toPage(item)">
					<image class="settingImg" :src="item.url" mode=""></image>
					<text class="settingName">
						{{item.name}}
					</text>
					<image class="arrow" src="../../static/images/arrow.png" mode=""></image>
				</view>
			</view>
		</view>
		<uv-modal ref="modal" title="是否退出登录？" :showCancelButton="true" @confirm="confirm"></uv-modal>
	</view>
</template>

<script>
	import reqApi from "../../api/api.js";
	export default {
		data() {
			return {
				userInfo: {
					total_income: 0,
					now_money: 0
				},
				settingList: [{
						url: "../../static/images/s4.png",
						name: "个人信息",
						path: "/pages/mine/myInfo"
					},
					{
						url: "../../static/images/s1.png",
						name: "反馈中心",
						path: "/pages/mine/feedbackList"
					},
					{
						url: "../../static/images/s2.png",
						name: "用户协议",
						path: `/pages/mine/aboutUs?type=sys_user_agree`
					},
					{
						url: "../../static/images/s3.png",
						name: "隐私政策",
						path: `/pages/mine/aboutUs?type=sys_userr_privacy`
					},
					{
						url: "../../static/images/s4.png",
						name: "联系客服"
					},
					// {
					// 	url: "../../static/images/s5.png",
					// 	name: "清除缓存"
					// },
					{
						url: "../../static/images/s6.png",
						name: "系统设置",
						path: "/pages/mine/setting"
					},
					{
						url: "../../static/images/s5.png",
						name: "退出登录"
					}
				]
			}
		},
		onShow() {
			this.getUserInfo();
			this.getConfig();
		},
		methods: {
			toEarnPage(){
				uni.navigateTo({
					url: "/pages/mine/myEarnings"
				})
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.sys_phone, // 电话号码
					success: function() {
						console.log('拨号成功');
					},
					fail: function() {
						console.log('拨号失败');
					}
				});
			},
			getConfig() {
				reqApi.basiConfig({}).then(res => {
					console.log("基础配置", res);
					this.sys_phone = res.data.sys_phone;
				})
			},
			confirm() {
				console.log('点击确认按钮');
				uni.clearStorage();
				uni.showToast({
					title: "退出成功",
					icon: 'none',
					mask: true,
					duration: 1500,
				})
				this.$refs.modal.close();
				setTimeout(() => {
					uni.reLaunch({
						url: "/pages/login/index"
					})
				}, 1500)
			},
			getUserInfo() {
				reqApi.getUserInfo({}).then(res => {
					console.log("获取用户信息", res);
					uni.setStorageSync("userInfo", res.data);
					this.userInfo = res.data;
				})
			},
			toPage(item) {
				if (item.name == "退出登录") {
					this.$refs.modal.open();
				} else if (item.name == "联系客服") {
					this.callPhone();
				} else {
					uni.navigateTo({
						url: item.path
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine {
		background: #fff;

		.headerImg {
			width: 100%;
			height: 396rpx;
		}

		.warpper {
			padding: 0 30rpx;
			box-sizing: border-box;

			.team {
				padding: 100rpx 30rpx 0 30rpx;
				box-sizing: border-box;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 60rpx;
				position: relative;
				box-shadow: 0rpx 0rpx 52rpx 12rpx rgba(95, 67, 0, 0.05);
				margin-top: -200rpx;
				z-index: 20;

				.avatar {
					width: 160rpx;
					height: 160rpx;
					border-radius: 200rpx;
					position: absolute;
					z-index: 50;
					top: -80rpx;
					left: 50%;
					transform: translateX(-50%);
				}

				.team-tp {
					display: flex;
					flex-direction: column;
					align-items: center;

					.nikename {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #222222;
					}

					.phone {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						margin-bottom: 30rpx;
					}
				}

				.team-tb {
					padding: 30rpx 0;
					box-sizing: border-box;
					border-top: 2rpx solid #eee;

					.line {
						display: flex;
						justify-content: space-between;

						.line-fl {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 32rpx;
							color: #222222;
						}

						.line-fr {
							display: flex;
							align-items: center;

							.txt {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #999999;
							}

							.arrow {
								width: 48rpx;
								height: 48rpx;
							}
						}
					}

					.line2 {
						display: flex;
						justify-content: space-between;
						margin-top: 30rpx;

						.line2-item {
							flex: 1;
							display: flex;
							flex-direction: column;
							align-items: center;

							.num {
								font-family: DIN, DIN;
								font-weight: bold;
								font-size: 48rpx;
								color: #EEA800;
							}

							.label {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #999999
							}
						}
					}
				}
			}

			.setting {
				padding: 15rpx 0;
				box-sizing: border-box;

				.setting-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 88rpx;

					.settingImg {
						width: 48rpx;
						height: 48rpx;
					}

					.settingName {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #222222;
						flex: 1;
						padding: 0 20rpx;
						box-sizing: border-box;
					}

					.arrow {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
	}
</style>
